<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layui表单生成器</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css">
</head>
<body style="padding: 15px">
<button type="button" class="layui-btn layui-btn-normal" id="addConf">添加配置</button>
<div style="padding: 16px;">
    <table class="layui-hide" id="table" lay-filter="test"></table>
</div>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    </div>
</script>
<script type="text/html" id="ID-table-demo-templet-switch">
    <!-- 这里的 checked 的状态值判断仅作为演示 -->
    <input type="checkbox" name="{{= d.name }}" value="{{= d.status }}" title="启用|" lay-skin="switch"
           lay-filter="demo-templet-status" {{=d.status==='1'?"checked":""}}>
</script>

</body>
<script type="text/javascript" src="/component/layui/layui.js"></script>
<script type="text/javascript" src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'dropdown', 'form', 'jquery']);
    var table = layui.table;
    var dropdown = layui.dropdown;
    var form = layui.form;
    var $ = layui.jquery

    // 创建渲染实例
    table.render({
        elem: '#table',
        url: '/nginx/http/config', // 此处为静态模拟数据，实际使用时需换成真实接口
        height: 'full-35', // 最大高度减去其他容器已占有的高度差
        cellMinWidth: 80,
        totalRow: true, // 开启合计行
        page: false,
        cols: [[
            {field: 'id', width: 10, title: 'id', hide: true},
            {field: 'name', width: 250, title: '名称'},
            {field: 'value', width: 400, title: '值'},
            {field: 'description', width: 250, title: '描述'},
            {field: 'status', width: 100, title: '是否启用', templet: '#ID-table-demo-templet-switch'},
            {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
        ]],
        done: function () {

        },
        error: function (res, msg) {
            console.log(res, msg)
        }
    });

    // 触发单元格工具事件
    table.on('tool(test)', function (obj) { // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        if (obj.event === 'edit') {
            console.log(data)
            layer.prompt(
                {
                    title: '编辑',
                    formType: 2,
                    value: data.value,
                    placeholder: '值',
                    success: function (layero, index, that) {
                        $(".layui-layer-content").prepend(`<br/><input type="text" id="name" class="layui-input" placeholder="名称"/><br/>`)
                        $(".layui-layer-content").append('<br/><textarea id="description" required lay-verify="required" placeholder="描述" class="layui-textarea"></textarea><br/>')
                        $('#name').val(data.name)
                        $('#description').val(data.description)
                        $('#name').focus()
                    }
                },
                function (value, index, elem) {
                    var name = $('#name').val()
                    if (!name) {
                        layer.msg('名称不能为空')
                        return
                    }
                    $.ajax({
                        data: {
                            id: data.id,
                            name: name,
                            value: value,
                            description: $('#description').val()
                        },
                        url: '/nginx/http/config',
                        type: 'put',
                        success(res) {
                            layer.msg(res.msg)
                            if (res.code === 0) {
                                setTimeout(() => {
                                    window.location.reload()
                                }, 800)
                            }
                        }
                    })
                    console.log(name)
                    console.log(value)
                    // 关闭 prompt
                    // layer.close(index);
                });
        } else if (obj.event === 'delete') {
            layer.confirm(`确认删除 <b style="color: red"> ${data.name} </b> 配置属性吗？可能会造成nginx无法启动`,
                {title: '提示'},
                function (i, y) {
                    $.ajax({
                        data: {id: data.id},
                        url: '/nginx/html',
                        type: 'delete',
                        success(res) {
                            layer.msg(res.msg)
                            if (res.code === 0)
                                setTimeout(() => {
                                    window.location.reload()
                                }, 800)
                        }
                    })
                });
        }
    });

    // 状态 - 开关操作
    form.on('switch(demo-templet-status)', function (obj) {
        var id = $(this).parent().parent().parent().first().find('div').html()
        $.ajax({
            url: '/nginx/http/status',
            data: {id: id},
            type: 'put',
            success(data) {
                layer.msg(data.msg)
            }
        })
    });

    $('#addConf').on('click', function addConf() {
        layer.prompt(
            {
                title: '添加配置',
                formType: 2,
                value: '',
                placeholder: '值',
                success: function (layero, index, that) {
                    $(".layui-layer-content").prepend(`<br/><input type="text" id="name2" class="layui-input" placeholder="名称"/><br/>`)
                    $(".layui-layer-content").append('<br/><textarea id="description2" required lay-verify="required" placeholder="描述" class="layui-textarea"></textarea><br/>')
                    $('#name').focus()
                }
            },
            function (value, index, elem) {
                $.ajax({
                    data: {
                        description: $('#description2').val(),
                        name: $('#name2').val(),
                        value: value
                    },
                    url: '/nginx/html',
                    type: 'post',
                    success(res) {
                        layer.msg(res.msg)
                        if (res.code === 0) {
                            setTimeout(() => {
                                window.location.reload()
                            }, 800)
                        }
                    }
                })
            });
    })
</script>
</html>
